<template>
  <el-container class="app-wrapper">
    <!-- 左侧导航栏 -->
    <el-aside width="200px" class="sidebar-container">
      <Menu />
    </el-aside>
    <el-container class="container">
      <!-- 头部 -->
      <el-header>
        <Navbar />
      </el-header>
      <!-- 主体部分 -->
      <el-main class="main"><router-view /></el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Menu from './menu'
import Navbar from '@/views/headers'

</script>

<style lang="scss" scoped>
.el-aside {
    background-color: #304156;
    width: auto;
    color: #333;
  }
.app-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.container {
  width: calc(100% - $sideBarWidth);
  height: 100%;

  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  transition: all 0.28s;
  &.hidderContainer {
    width: calc(100% - $hideSideBarWidth);
  }
}
::v-deep .el-header {
  padding: 0;
}
// .main{
//   width: 100%;
// }
</style>
